<template>
    <div>
        <div id="cesiumContainer"></div>
        <div class="cesiumBG"></div>
        <div class="mySearch" v-if="false">
            <input
                class="search-input"
                v-model="keyword"
                type="text"
                placeHolder="输入位置"
            />
            <div class="search-content" v-show="keyword">
                <ul>
                    <li
                        class="search-item border-bottom"
                        v-for="(item, index) in searchList.searchList"
                        :key="index"
                        @click="handleCityClick(item.x, item.y)"
                    >
                        {{ item.value }}
                    </li>
                    <!-- <li class="search-item border-bottom" v-show="hasNoData">
                    没有找到匹配数据
                </li> -->
                </ul>
            </div>
        </div>
        <div
            class="removeAll"
            v-show="$store.state.leftPanelShow"
            :style="{ right: `${listright}px` }"
        >
            <div class="dropArrow" @click="dropArrowHandle">
                <span class="iconfont" v-html="Arrow"></span>
            </div>
            <div class="toolBar" v-show="drowpState">
                <!-- <div class="erwei" title="搜索" @click="dixing()">
                    <span class="iconfont">&#xe7bd;</span>
                </div> -->
                <div class="erwei" title="地形" @click="dixing()">
                    <span class="iconfont">&#xe679;</span>
                </div>
                <div class="erwei" title="二维" @click="erwei()">
                    <span class="iconfont">&#xe69d;</span>
                </div>
                <div class="erwei" title="三维" @click="sanwei()">
                    <span class="iconfont">&#xe607;</span>
                </div>
                <div class="ceju" title="距离" @click="ceju">
                    <span class="iconfont">&#xe603;</span>
                </div>
                <div class="cemian" title="面积" @click="cemian">
                    <span class="iconfont">&#xe619;</span>
                </div>
            </div>
            <div class="splitLine"></div>
            <div class="qingchu" title="清除图层" @click="removeAll">
                <span class="iconfont">&#xe67e;</span>
            </div>
            <div class="splitLine"></div>
            <div class="qingchu" title="复位" @click="fuwei">
                <span class="iconfont">&#xe61f;</span>
            </div>
        </div>
        <div class="tuli" title="图例" :style="{ right: `${listright}px` }">
            <i class="el-icon-turn-off turnoff" @click="clicktuli()"></i>
        </div>
        <div class="tuli-content" v-show="showtuli"></div>
        <Bottom></Bottom>
    </div>
</template>

<script>
import viewerInit from "../../cesiumPlugin/viewerInit";
import LayerManager from "../../cesiumPlugin/layerManager";
import { useStore } from "vuex";
import {
    onMounted,
    ref,
    onBeforeMount,
    reactive,
    watch,
    computed,
    watchEffect,
    nextTick,
} from "vue";
import axios from "axios";
import Bottom from "../common/Bottom";
import { useRouter, useRoute } from "vue-router";
// import { useStore } from 'vuex'
export default {
    name: "CesiumContainer",
    components: {
        Bottom,
    },
    setup() {
        const store = useStore();
        const Router = useRouter();
        const route = useRoute();
        const Arrow = ref("");
        let drowpState = ref(false);
        let listright = ref(410);
        let showtuli = ref(true);
        const upArrow = "&#xe605;";
        const downArrow = "&#xe606;";
        let keyword = ref("");
        // let hasNoData = ref(true)
        let isShowSearch = ref(false);
        let timer = null;
        let searchList = reactive({ searchList: [] });
        // const store = useStore()
        let currentComponent = computed(() => {
            return store.state.hngkComponent;
        });
        let hasNoData = computed(() => {
            return !searchList.value.length;
        });

        const handleCityClick = (x, y) => {
            viewer.camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(
                    parseFloat(x),
                    parseFloat(y),
                    8000
                ), //定位坐标点，建议使用谷歌地球坐标位置无偏差
                duration: 1, //定位的时间间隔
            });
        };
        const clicktuli = () => {
            showtuli.value = !showtuli.value;
        };
        const removeAll = () => {
            store.commit("changeDescShow", false);
            layerManager.removeAll();
            if(store.state.userRegion=="海南省"){
                return
            }else{
                Cesium.GeoJsonDataSource.load(
                    `./data/geojson/cityOrCounty/${store.state.userRegion}.json`,
                    {
                        //clampToGround: false, //开启贴地
                        stroke: Cesium.Color.fromCssColorString(
                            "rgba(115,227,230,1)"
                        ),
                        strokeWidth: 20,
                        fill: Cesium.Color.fromCssColorString(
                            "rgba(115,227,230,1)"
                        ).withAlpha(0.2),
                    }
                ).then((dataSource) => {
                    viewer.dataSources.add(dataSource);
                    
                });
            }
            

            
        };
        onBeforeMount(() => {
            // document.onkeydown = function(e) {
            //     e.preventDefault();
            //     var keyCode = e.keyCode || e.which || e.charCode;
            //     var altKey = e.ctrlKey ;
            //     if(altKey && keyCode == 68) {// 组合键 ctrl + D
            //         layerManager.removeAll()
            //     }
            // }
        });
        let isGC = false;
        const addTerri = () => {
            if (!isGC) {
                //viewer.scene.terrainProvider = new Cesium.EllipsoidTerrainProvider({});
                isGC = true;
            } else {
                // viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
                //   url:'https://www.supermapol.com/realspace/services/3D-stk_terrain/rest/realspace/datas/info/data/path',
                //   requestWaterMask:true,
                //   requestVertexNormals: true
                // })
                isGC = false;
            }
        };
        const dropArrowHandle = () => {
            drowpState.value = !drowpState.value;
            if (drowpState.value) {
                Arrow.value = downArrow;
            } else {
                Arrow.value = upArrow;
            }
        };
        const ceju = () => {
            layerManager.juliceliang();
        };
        const cemian = () => {
            layerManager.mianjiceliang();
        };
        const erwei = () => {
            viewer.scene.mode = Cesium.SceneMode.SCENE2D;
        };
        const sanwei = () => {
            viewer.scene.mode = Cesium.SceneMode.SCENE3D;
        };
        let isDixing = true;
        const dixing = () => {
            if (isDixing) {
                viewer.scene.terrainProvider =
                    new Cesium.EllipsoidTerrainProvider();
                isDixing = false;
            } else if (!isDixing) {
                viewer.scene.terrainProvider = window.dx;
                isDixing = true;
            }
        };
        const fuwei = () => {
            // viewer.camera.flyTo({
            //     destination: Cesium.Cartesian3.fromDegrees(109.75985598565222,19.261744640490033,467431),
            // });
            let cameraArr = cityCamera[userRegion.value];
            window.viewer.camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(
                    cameraArr[0],
                    cameraArr[1],
                    cameraArr[2]
                ), // 设置位置
                orientation: {
                    heading: cameraArr[3], // 方向
                    pitch: cameraArr[4], // 倾斜角度
                    roll: cameraArr[5],
                },
            });
        };

        const cityCenter = {
            海南省: [109.75985598565222, 19.261744640490033, 467431],
            海口市: [110.198418, 20.045805, 50000],
            三亚市: [109.511709, 18.252865, 50000],
            三沙市: [112.234483, 16.774644, 50000],
            儋州市: [109.580812, 19.520948, 50000],
            五指山市: [109.516784, 18.774827, 50000],
            文昌市: [110.797473, 19.544234, 50000],
            琼海市: [110.474524, 19.259112, 50000],
            万宁市: [110.392605, 18.793697, 50000],
            东方市: [108.651829, 19.095187, 50000],
            定安县: [110.358001, 19.681215, 50000],
            屯昌县: [110.101667, 19.351662, 50000],
            澄迈县: [110.007497, 19.738885, 50000],
            临高县: [109.690508, 19.912025, 50000],
            白沙县: [109.4429, 19.221641, 50000],
            昌江县: [109.055783, 19.298139, 50000],
            乐东县: [109.173384, 18.750063, 50000],
            陵水县: [110.037553, 18.506045, 50000],
            保亭县: [109.700373, 18.640156, 50000],
            琼中县: [109.838389, 19.033369, 50000],
        };
        const cityCamera = {
            海南省: [109.72943192389651,19.219751618870205,467553,6.26562941583375,-1.5700490523353827,0],
            海口市: [110.46903669538212, 19.821681289868625, 133159,6.268924143243026, -1.5706193181619361, 0,],
            三亚市: [109.35393831067243,18.37269956333181,163513,6.265629416833095,-1.5701295571734093,0],
            三沙市: [112.20741197202375,16.44704315102461,341174,6.26562941908717,-1.5703629220680932,0],
            儋州市: [109.35921995236242,19.499344222298067,213635,6.265629418558841,-1.5702983071652699,0],
            五指山市: [109.46632538975518,18.827106810376993,99462,6.265629419245549,-1.5703842580234864,0],
            文昌市: [110.70939387734569,19.774310251206337,181540,6.237318702840444,-1.5704666153657523,0],
            琼海市: [110.35759174408751,19.232922018907246,121768,6.265629415792926,-1.5700459491428709,0],
            万宁市: [110.22722323024112,18.82313697415415,142951,6.265629416104256,-1.5700699639770042,0],
            东方市: [108.77462897500149,18.977819613723312,157652,6.265629415996722,-1.5700615785615746,0],
            定安县: [110.28605051238146,19.484638333746165,116499,6.265629415542851,-1.5700272020774317,0],
            屯昌县: [110.00847966479438,19.344375512011375,115912,6.265629415863815,-1.570051347391619,0],
            澄迈县: [109.91326896658309,19.68565957186888,148938,6.26562941546528,-1.5700214791797378,0],
            临高县: [109.66698575267446,19.802690359939838,122369,6.265629415358095,-1.570013640218586,0],
            白沙黎族自治县: [109.30809210652244,19.203270777750895,152114,6.265629415817102,-1.5700477860496354,0],
            昌江黎族自治县: [109.00039369386751,19.169070636730307,163206,6.26562941588277,-1.570052799358546,0],
            乐东黎族自治县: [109.0195516401752,18.651773489125834,161351,6.265629416530112,-1.570104160226431,0],
            陵水黎族自治县: [109.86809782522703,18.599245944243577,115091,6.265629416471459,-1.5700993509323613,0],
            保亭黎族苗族自治县: [109.60587467168726,18.617143007438127,116539,6.265629416472762,-1.5700994574972644,0],
            琼中黎族苗族自治县: [109.78188485782667,19.05192370970939,188671,6.265629415968345,-1.5700593836075614,0],
            洋浦经济开发区: [109.20414360922236,19.774387361939898,35023,6.26562941501618,-1.5699891419824157,0]
        };
        const userRegion = computed(() => {
            return store.state.userRegion;
        });
        let cameraArr = [] ;
        watch(
            () => store.state.userRegion,
            (newValue) => {
                cameraArr = cityCamera[newValue];
                //飞到当前区域视角
                nextTick(()=>{
                    window.viewer.camera.flyTo({
                        destination: Cesium.Cartesian3.fromDegrees(
                            cameraArr[0],
                            cameraArr[1],
                            cameraArr[2]
                        ), // 设置位置
                        orientation: {
                            heading: cameraArr[3], // 方向
                            pitch: cameraArr[4], // 倾斜角度
                            roll: cameraArr[5],
                        },
                    });
                })
                
                //加载矢量
                if(newValue!="海南省"){
                    Cesium.GeoJsonDataSource.load(
                        `./data/geojson/cityOrCounty/${newValue}.json`,
                        {
                            //clampToGround: false, //开启贴地
                            stroke: Cesium.Color.fromCssColorString(
                                "rgba(115,227,230,1)"
                            ),
                            strokeWidth: 20,
                            fill: Cesium.Color.fromCssColorString(
                                "rgba(115,227,230,1)"
                            ).withAlpha(0.2),
                        }
                    ).then((dataSource) => {
                        viewer.dataSources.add(dataSource);
                        
                    });
                }else{

                }
                
            },
            {
                immediate: true,
            }
        );
        onMounted(() => {
            viewerInit();
            Cesium.Camera.prototype.setPitch = function(value) {
                let centerPoint = this.pickEllipsoid(
                    new Cesium.Cartesian2(
                        this._scene.canvas.clientWidth / 2,
                        this._scene.canvas.clientHeight / 2
                    )
                );
                let distance = Cesium.Cartesian3.distance(centerPoint, this.position);
                this.flyToBoundingSphere(new Cesium.BoundingSphere(centerPoint, distance), {
                    offset: new Cesium.HeadingPitchRange(
                        this.heading,
                        (Math.PI * (value - 90)) / 180,
                        distance
                    ),
                });
            };
            viewer.camera.setPitch(120)
            window.fmh = new YsCesium(viewer);
            
            window.layerManager = new LayerManager(viewer);
            // viewer.camera.flyTo({
            //    destination: Cesium.Cartesian3.fromDegrees(109.75985598565222,19.261744640490033,467431),
            // });
            Arrow.value = upArrow;
        });
        return {
            removeAll,
            addTerri,
            ceju,
            cemian,
            dropArrowHandle,
            erwei,
            sanwei,
            dixing,
            handleCityClick,
            clicktuli,
            fuwei,
            Arrow,
            drowpState,
            isShowSearch,
            keyword,
            hasNoData,
            searchList,
            showtuli,
            listright,
            currentComponent,
        };
    },
};
</script>
<style >
#cesiumContainer .cesium-performanceDisplay {
    margin-right: 1500px;
    margin-top: 50px;
}
.dantihuaBox {
    overflow: hidden;
    width: 302px;
    color: #fdf7f7;
}
.dantihuaBox .divli {
    /* height:30px; */
    /* line-height:30px; */
}
.span1 {
    padding-left: 10px;
    background: #0c3e81;
    line-height: 30px;
    width: 100%;
    height: 30px;
    color: #fdf7f7;
    display: block;
    font-size: 18px;
    float: left;
}
.clearfix::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    *zoom: 1;
}
</style>
<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .cesiumBG {
        width: 100vw;
        height: 100vh;
        position: relative;
        z-index: 0;
        background: url('/data/images/earth/bg1.png') no-repeat;
        background-size: 100% 100%;
        pointer-events: none;
    }

    #cesiumContainer {
        position: absolute;
        z-index: 0;
        width: 100%;
        height: 100%;
        background: #000;
    }

    #app .cesium-widget-credits {
        display: none !important;
        visibility: hidden !important;
    }

    .removeAll {
        position: fixed;
        bottom: vh(50);
        right: 410px;
        z-index: 1;
        cursor: pointer;
        border-radius: 5px;
    }

    .line {
        width: vw(25);
        height: 0;
        border-bottom: 1px solid #dddddd;
        margin: 0 auto;
    }

    .tuli {
        width: vw(36);
        height: vh(40);
        position: fixed;
        bottom: vh(10);
        right: vw(410);
        z-index: 1;
        cursor: pointer;
        text-align: center;
        // line-height :vh(40);
        box-sizing: border-box;
        background: rgba(38, 38, 38, 0.3);

        .turnoff {
            width: vw(25);
            height: vh(40);
            line-height: vh(40);
            border-top: 1px solid #dddddd;
            color: #2ec5ad;
        }
    }

    .tuli-content {
        width: vw(155);
        height: vh(277);
        position: fixed;
        bottom: vh(10);
        right: vw(480);
        z-index: 1;
        cursor: pointer;
        background: url('/data/images/hngk/turn.png') no-repeat;
        background-size: 100% 100%;
    }

    // .splitLine{
    // width:vw(25)
    // height:0
    // border-bottom:1px solid #dddddd
    // margin:0 auto
    // }
    .removeAll>.dropArrow {
        padding: vh(12) vw(10);
        font-size: vw(16);
        background: rgba(38, 38, 38, 0.3);
    }

    .removeAll>.dropArrow:hover {
        background: #2c3e50;
        color: #fff;
    }

    .removeAll .dropArrow span {
        color: #2ec5ad;
    }

    .removeAll>.toolBar>div {
        padding: vh(12) vw(10);
        font-size: vw(16);
        background: rgba(38, 38, 38, 0.3);
    }

    .removeAll>.toolBar>div:hover {
        background: #2c3e50;
        color: #fff;
    }

    .removeAll>.toolBar>div>span {
        color: #2ec5ad;
    }

    .removeAll>.splitLine {
        width: vw(25);
        height: 0;
        border-bottom: 1px solid #dddddd;
        margin: 0 auto;
    }

    .removeAll .qingchu {
        padding: vh(12) vw(10);
        font-size: vw(16);
        background: rgba(38, 38, 38, 0.3);
    }

    .removeAll>.qingchu:hover {
        background: #2c3e50;
        color: #fff;
    }

    .removeAll .qingchu span {
        color: #2ec5ad;
    }

    .mySearch {
        width: vw(200);
        height: vh(72);
        background: transparent;
        position: fixed;
        z-index: 12;
        top: vh(200);
        right: vw(500);
        cursor: pointer;

        .search-input {
            box-sizing: border-box;
            position: absolute;
            z-index: 12;
            left: 0;
            top: vh(0);
            width: vw(200);
            height: vh(62);
            padding: vw(10);
            line-height: vh(62);
            text-align: center;
            border-radius: 6px;
            color: #666;
        }

        .search-content {
            width: vw(200);
            min-height: vh(200);
            overflow: hidden;
            position: absolute;
            z-index: 12;
            left: 0;
            top: vh(62);
            background: #eee;

            .search-item {
                line-height: vh(62);
                padding-left: vw(20);
                background: #fff;
                color: #666;
            }
        }
    }
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .cesiumBG {
        width: 100vw;
        height: 100vh;
        position: relative;
        z-index: 1;
        background: url('/data/images/earth/bg1w.png') no-repeat;
        background-size: 100% 100%;
        pointer-events: none;
    }

    #cesiumContainer {
        position: absolute;
        z-index: 0;
        width: 100%;
        left: 0%;
        // left:33%
        height: 100%;
        background: #000;
    }

    #app .cesium-widget-credits {
        display: none !important;
        visibility: hidden !important;
    }

    .removeAll {
        position: fixed;
        bottom: vh(30);
        right: vw1(1300);
        z-index: 1;
        cursor: pointer;
        border-radius: 5px;
        display: none;
    }

    .removeAll>.dropArrow {
        padding: vh(12) vw(10);
        font-size: vw(16);
        background: rgba(38, 38, 38, 0.75);
    }

    .removeAll>.dropArrow:hover {
        background: #2c3e50;
        color: #fff;
    }

    .removeAll .dropArrow span {
        color: #00eaff;
    }

    .removeAll>.toolBar>div {
        padding: vh(12) vw(10);
        font-size: vw(16);
        background: rgba(38, 38, 38, 0.75);
    }

    .removeAll>.toolBar>div:hover {
        background: #2c3e50;
        color: #fff;
    }

    .removeAll>.toolBar>div>span {
        color: #2ec5ad;
    }

    .removeAll>.splitLine {
        width: vw(25);
        height: 0;
        border-bottom: 1px solid #dddddd;
        margin: 0 auto;
    }

    .removeAll .qingchu {
        padding: vh(12) vw(10);
        font-size: vw(16);
        background: rgba(38, 38, 38, 0.75);
    }

    .removeAll>.qingchu:hover {
        background: #2c3e50;
        color: #fff;
    }

    .removeAll .qingchu span {
        color: #2ec5ad;
    }

    .mySearch {
        width: vw(200);
        height: vh(72);
        background: transparent;
        position: fixed;
        z-index: 12;
        top: vh(200);
        right: vw(500);
        cursor: pointer;

        .search-input {
            box-sizing: border-box;
            position: absolute;
            z-index: 12;
            left: 0;
            top: vh(0);
            width: vw(200);
            height: vh(62);
            padding: vw(10);
            line-height: vh(62);
            text-align: center;
            border-radius: 6px;
            color: #666;
        }

        .search-content {
            width: vw(200);
            min-height: vh(200);
            overflow: hidden;
            position: absolute;
            z-index: 12;
            left: 0;
            top: vh(62);
            background: #eee;

            .search-item {
                line-height: vh(62);
                padding-left: vw(20);
                background: #fff;
                color: #666;
            }
        }
    }
}
</style>
